<template>
	<view class="address">
		<!-- 头部 -->
		<u-navbar back-text="新建地址" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- end -->

		<!-- 内容 -->
		<view class="content">
			<view class="name clearfix">
				<view>联系人：</view>
				<input type="text" v-model="contactsName" class="fr" placeholder="请输入联系人姓名" placeholder-style="color:#B8B8B8;" />
			</view>
			<view class="phone clearfix">
				<view>
					电话号码：
				</view>
				<input type="number" v-model="contactsPhone" class="fr" maxlength="11" placeholder="请输入联系人电话" placeholder-style="color:#B8B8B8;" />
			</view>
			<view class="region clearfix">
				<view>
					所在地址：
				</view>
				<text id="whereAddress" class="fr" @tap="openAddres">{{ label }}</text>
				<image src="../../static/icon/right-arrow.png" mode="" @tap="openAddres"></image>
			</view>
			<view style="padding-left: 24rpx;">
				详细地址：
			</view>
		</view>

		<view class="problem">
			<textarea class="p-20" placeholder="请输入您的楼栋号/单元号/门牌号" maxlength="50" @input="descInput" v-model="address" />
			<view style="display: flex;justify-content:space-between;margin-top: 22rpx;margin-left: 46rpx;">
				<view class="default" @click="setiSdefault">
					<image src="../../static/icon/gou.png" style="width: 38rpx;height: 38rpx;vertical-align: middle;margin-right: 15rpx;" v-if="defaultFlag"></image>
					<image src="../../static/icon/nochecked.png" style="width: 38rpx;height: 38rpx;vertical-align: middle;margin-right: 15rpx;" v-else></image>
					<text>设为默认地址</text>
				</view>
				<view class="num">{{remnant}}/50</view>
			</view>
			
		</view>
		
		<view class="butttom" @click="add">
			{{buttomName}}
		</view>
		
		<u-toast ref="uToast" />
		<!-- end -->
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				
				label: '请选择地址',
				contactsName:'',//联系人
				contactsPhone:'',//联系人手机号
				province:'',//省
				city:'',//市
				region:'',//区
				address:'',//详细地址
				mapAddress:'',//地图选取的街道
				defaultFlag:false,
				addressId:null,
				remnant:0,
				buttomName:null,
				type:0,//0:家庭地址 1:选择地址
			};
		},
		onLoad(option) {
			var _this = this;
			if (option.id) {
				this.addressId=option.id;
				this.getAddRess();
			}
			console.log(option.type)
			if(option.type){
				this.type=option.type;
				if(this.type==0){
					this.buttomName='保存地址';
				}else{
					this.buttomName='保存并修改';
				}
			}
		},
		methods: {
			getAddRess:function(){
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'user-address/edit/info'
				};
				let data = {
					addressId: this.addressId
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=="200"){
						this.province=res.data.province;
						this.city=res.data.city;
						this.region=res.data.region;
						this.address=res.data.address;
						this.contactsName=res.data.contactsName;
						this.contactsPhone=res.data.contactsPhone;
						this.defaultFlag=res.data.defaultFlag;
						this.mapAddress=res.data.mapAddress;
						this.label=res.data.city+res.data.region+res.data.mapAddress;
					}else{
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			},
			setiSdefault(){
				this.defaultFlag=this.defaultFlag?false:true;
			},
			descInput(){
			   var txtVal = this.address.length;
			   this.remnant = txtVal;
			 },
			openAddres() {
				uni.navigateTo({
					url:'../map/map'
				})
			},
			add() {
				let falg=true;
				if (this.contactsName === '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '联系人不能为空'
					});
					return falg=false;
				}
				if (this.contactsPhone.length !== 11 || this.contactsPhone[0] != 1) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请正确填写手机号'
					});
					return falg=false;
				}
				console.log(this.province)
				if (this.province === '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '省、市、区不能为空'
					});
					return falg=false;
				}
				if (this.address === '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '详细地址不能为空'
					});
					return falg=false;
				}
				
				if(falg){
					let opts={};
					let data={};
					if(this.addressId){
						//修改
						opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: 'user-address/update'
						};
						data = {
							province: this.province,
							city: this.city,
							region:this.region,
							address:this.address,
							contactsName:this.contactsName,
							contactsPhone:this.contactsPhone,
							defaultFlag:this.defaultFlag?1:0,
							addressId:this.addressId,
							mapAddress:this.mapAddress
						};
					}else{
						//新增
						opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: 'user-address/add'
						};
						data = {
							province: this.province,
							city: this.city,
							region:this.region,
							address:this.address,
							contactsName:this.contactsName,
							contactsPhone:this.contactsPhone,
							defaultFlag:this.defaultFlag?1:0,
							mapAddress:this.mapAddress
						};
						
					}
					
					this.http.httpTokenRequest(opts, data).then(res => {
						if(res.code=="200"){
							this.$refs.uToast.show({
								title: res.message,
								type: 'success'
							})
							let pages = getCurrentPages();  //获取所有页面栈实例列表
							let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
							prevPage.$vm.page = 1;
							prevPage.$vm.address = [];
							prevPage.$vm.getAddressList();
							prevPage.$vm.addAddressType=this.type;
							var address={
								addressId: this.addressId?this.addressId:res.data,
								province: this.province,
								city: this.city,
								region: this.region,
								address: this.address,
								contactsName: this.contactsName,
								contactsPhone: "18503838380",
								defaultFlag: this.defaultFlag,
								mapAddress:this.mapAddress
							};
							prevPage.$vm.selectAddress=address;
							uni.navigateBack({
								delta:1
							})
						}else{
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							})
						}
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	#whereAddress{
		width: 500rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.default{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F29423;
		opacity: 0.71;
	}
	.content {
		font-size: 30rpx;
		font-weight: 400;
	}
	.content .name,.content .phone,.content .region{
		border-bottom: 2rpx solid #E4E4E4;
	}
	.content view {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		align-items: center;
		padding-left:12rpx;
	}
	.content .name view{
		margin-right: 34rpx;
	}
	.content .region image{
		width: 19rpx;height: 34rpx;
	}
	
	.content view input {
		// border: 1px solid;
		width: 450rpx;
		line-height: 100rpx;
		height: 100rpx;
		font-size: 26rpx;
	}

	.content view text {
		width: 480rpx;
		line-height: 100rpx;
		height: 100rpx;
		font-size: 30rpx;
		color: #B8B8B8;
	}
	.p-20{
		border: 1px solid #999;
		padding: 14rpx 24rpx;
		font-size: 30rpx;
		color: #B8B8B8;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 21rpx;
		margin: 0 auto;
		height: 184rpx;
	}
	.num{
		float: right;
		// padding-top: 14rpx;
		padding-right: 54rpx;
		color: #707070;
	}
	.foot{
		text-align: center; margin-top: 470rpx;
	}
	
	.butttom{
		width: 642rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #FCA800;
		opacity: 1;
		border-radius: 48rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		opacity: 1;
		position: absolute;
		z-index: 2;
		bottom: 74rpx;
		left: 54rpx;
	}
</style>
